<template>
  <div>
    <div id="myChart" style="width: 1500px"></div> <!-- 改为 id 而不是 class -->

    <div style="display: flex">
      <el-input v-model="input" :disabled="true" placeholder="请输入内容"
                style="margin-right: 10px;margin-left: 20px"></el-input>
      <el-button type="primary" @click="clickDel()" icon="el-icon-delete">清空</el-button>
      <el-button type="primary" :loading="isLoading"  @click="daKai()" icon="el-icon-search" style="margin-right: 10px">出题
      </el-button>
    </div>
    <el-dialog title="选择题" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="">
          {{ form.question }}
        </el-form-item>
        <el-form-item label="选项">
          <el-radio-group v-model="form.selectedOption">
            <el-radio label="A">{{ form.x1 }}</el-radio>
            <el-radio label="B">{{ form.x2 }}</el-radio>
            <el-radio label="C">{{ form.x3 }}</el-radio>
            <el-radio label="D">{{ form.x4 }}</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendXuan()">确 定</el-button>
      </div>
      <div v-if="showDisplay">
        <!-- 这里放置你要展示的内容 -->
        <el-card class="box-card">
          答案：<br>
          {{ form.answer }}
          <br>解析：<br>
          {{ form.analysis }}
        </el-card>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";

export default {
  data() {
    return {
      form: {
        date: '',
        text: '',
        title: '',
        question: '问题1',
        x1: '选项1',
        x2: '选项2',
        x3: '选项3',
        x4: '选项4',
        selectedOption: '',
        answer: '',
        analysis: '',
        zongwenti: '',
      },
      nameList:[],
      dialogFormVisible: false,
      input: '',
      isRecording: false,
      mediaRecorder: null,
      chunks: [],
      showDisplay: false,
      score: null,
      isLoading:false,
    }
  },
  mounted() {
    this.createEcharts()
  },
  methods: {
    // 生成图表
    createEcharts(){
      const chartDom = document.getElementById('myChart');
      const myChart = echarts.init(chartDom);
      let option;
      myChart.showLoading();
      axios.get('http://localhost:8081/mapGeo').then(res => {
        const graph = res.data.data
        myChart.hideLoading();
        graph.nodes.forEach(function (node) {
          node.label = {
            show: node.symbolSize > 0
          };
          node.symbolSize = node.symbolSize * 1.5;

        });
        option = {
          title: {
            text: '地理知识图谱',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right'
          },
          tooltip: {},
          legend: [
            {
              // selectedMode: 'single',
              data: graph.categories.map(function (a) {
                return a.name;
              })
            }
          ],
          animationDuration: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              type: 'graph',
              legendHoverLink: true,
              layout: 'force',
              data: graph.nodes,
              links: graph.links,
              categories: graph.categories,
              roam: true,
              force: {
                repulsion: 280,
                gravity: 0.1,
                initial: true,
              },
              label: {
                position: 'middle',
                formatter: '{b}'
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3
              },
              emphasis: {
                focus: 'adjacency',
                lineStyle: {
                  width: 10
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        myChart.on('click', (params) => {
          if (params.data.symbolSize < 30) {
            this.input += params.data.name + ' '
            this.nameList.push(params.data.name)
          }
        })
      })
    },
    // 提问后更新图表数据
    updateEcharts(){
      axios.get(`http://localhost:8081/mapGeo/update?nameList=${this.nameList}`).then(res => {
        this.createEcharts()
      })
    },

    //处理问题分解
    chuli(questionStr) {

      // 使用正则表达式分割字符串

      const pattern = /(.+?)\s*(A)\s*(.+?)\s*(B)\s*(.+?)\s*(C)\s*(.+?)\s*(D)\s*(.+)/;

      const matches = questionStr.match(pattern);


      if (matches) {

        // 分割成功，分别赋值

        this.form.question = matches[1].trim(); // 题目部分，去除前后空白

        this.form.x1 ='A:'+ matches[3].trim()+'\n'; // A之后B之前的值

        this.form.x2 ='B:'+  matches[5].trim()+'\n'; // B之后C之前的值

        this.form.x3 ='C:'+  matches[7].trim()+'\n'; // C之后D之前的值

        this.form.x4 ='D:'+  matches[9].trim()+'\n'; // D之后的值

      } else {

        console.error('题目格式不匹配');

      }

    },

    daKai() {

      this.sendQuestion();
      this.isLoading = false;

    },
    sendXuan() {
      this.showDisplay = true;
    },


    //发送出题
    async sendQuestion() {
      try {
        this.isLoading = true;
        // 准备发送的数据
        const dataToSend = {
          id: this.$cookies.get("cid"), // 用户id
          pointList: this.input
        };
        // 发送 GET 请求到端口 8081
        const response = await fetch(`http://localhost:8081/choice-questions-by-ai/ask?id=${dataToSend.id}&pointList=${encodeURIComponent(dataToSend.pointList)}`, {
          method: 'POST' // 改为 GET 请求
        });
        // 解析服务器返回的响应数据
        const data = await response.json(); // 使用 await 等待解析完成
        console.log(data.data[0].question);

        this.form.zongwenti = data.data[0].question; // 假设服务器返回了 data.data.question
        this.form.analysis=data.data[0].analysis;
        this.form.answer=data.data[0].answer;
        this.dialogFormVisible = true; // 显示对话框
        this.chuli(this.form.zongwenti)
        console.log("123")
      } catch (error) {
        console.error('发送请求时出错：', error);
      }
      this.updateEcharts()

    },
    clickDel() {
      this.input = ''
      this.nameList=[]
    },

  }
}
</script>
<style scoped>
#myChart {
  width: 1600px; /* 或具体像素值 */
  height: 600px; /* 或具体像素值 */
}
</style>
